<template>
  <view>
    <u-loading-page :loading="pageLoading"></u-loading-page>
    <u-empty mode="list" v-if="listData.length === 0" :style="{height: `${screenHeight}px`}" />
    <scroll-view class="" v-if="!pageLoading && listData.length > 0" scroll-y refresher-enabled show-scrollbar
                 :refresher-triggered="triggered" @refresherrefresh="$u.throttle(onRefresherrefresh, 200)"
                 @scrolltolower='$u.throttle(onScrolltolower,1000)' :style="{height: `${screenHeight}px`}">
      <!-- 列表 -->
      <view class="p-l-30 p-r-30">
        <u-checkbox-group
            v-model="checkboxValue"
            placement="column"
        >
          <u-checkbox
              v-for="(item, index) in listData" :key="index"
              :label="item.label"
              :name="item.value"
              class="item"
          ></u-checkbox>
        </u-checkbox-group>
      </view>

      <u-button class="button" type="primary" text="确定" @tap="itemClick"></u-button>
    </scroll-view>
  </view>
</template>

<script>
import {
  listOptions
} from '@/apis/bill/labelForCustomer'

export default {
  data() {
    return {
      screenHeight: 0,
      pageLoading: true,
      triggered: false,
      listData: [],
      pageInfo: {
        current: 1, // 当前页
        size: 10, // 每页数据条数
        sort: '', // 排序字段
        order: 'desc', // 排序方向
        total: 0 // 总数居量
      },
      checkboxValue: []
    }
  },
  onLoad({ ids }) {
    this.initData()
    console.log(ids)
  },
  onReady() {
    const sysInfo = uni.getSystemInfoSync()
    this.screenHeight = sysInfo.windowHeight
  },
  methods: {
    initData() {
      this.listPage()
    },
    listPage() {
      this.triggered = true
      const params = {
        page: this.pageInfo,
        data: {
          isBarcode: 1
        }
      }
      listOptions(params).then(res => {
        if (!res.data.flag) return
        const records = res.data.data || []
        this.listData.push(...records)
      }).finally(_ => {
        this.triggered = false
        this.pageLoading = false
      })
    },
    itemClick() {
      const data = this.listData.filter(item => this.checkboxValue.findIndex(i => i === item.value) !== -1)
      uni.$emit("on-selected-label-for-customer", data)
      this.$Router.back()
    },
    onRefresherrefresh() {
      this.listData = []
      this.listPage()
    },
    onScrolltolower() {}
  }
}
</script>

<style lang="scss" scoped>
.item {
  border-radius: 10rpx;
  background: #fff;
  padding: 30rpx;
  margin-top: 20rpx;

  .name {
    font-size: 40rpx;
  }
}

.button {
  width: 92%;
  margin-top: 30rpx;
}
</style>
